<template>
  <div>
    <div class="center">
      <div v-if="list && !list.hierarchy">
        <div class="toptitle">{{ list.title }}</div>
        <div
          class="center_list"
          v-for="(item, index) in list.subclass"
          :key="index"
          :style="index !== 0 ? 'margin-top: 15px' : ''"
          @click="navToNext(item.id, item.title)"
        >
          <div class="center_txt">
            <div class="center_txt_img">
              <img src="../icon/31.png" alt="" />
            </div>
            <div>{{ item.title }}</div>
          </div>
          <div class="center_img">
            <img src="../icon/32.png" alt="" />
          </div>
        </div>
      </div>
      <div v-if="list && list.hierarchy">
        <div v-for="(item, index) in list.subclass" :key="index">
          <div class="toptitle">{{ item.title }}</div>
          <div
            class="center_list"
            v-for="(subItem, subIndex) in item.subclass"
            :key="subIndex"
            :style="subIndex !== 0 ? 'margin-top: 15px' : ''"
            @click="navToNext(subItem.id, subItem.title, subItem.status)"
          >
            <div class="center_txt">
              <div class="center_txt_img">
                <img src="../icon/31.png" alt="" />
              </div>
              <div>{{ subItem.title }}</div>
            </div>
            <div class="center_img">
              <img src="../icon/32.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="bottom" @click="$router.go(-1)">返回首页</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      apiUrl: "/api/mzcy/tklb/menu",
      list: [],
    };
  },
  mounted() {
    this.getdatalist();
    // // console.log(typeof this.$route.query.id);
  },
  methods: {
    getdatalist: function () {
      this.$http.get(this.apiUrl).then(
        (res) => {
          // console.log(res.data.data);
          this.list = res.data.data.filter(
            (item) => item.id == this.$route.query.id
          )[0];
        },
        (res) => {
          // 响应错误回调
        }
      );
    },
    navToNext(id, title, status) {
      // console.log(status, "status");
      // console.log(this.list.hierarchy);
      if (!this.list.hierarchy) {
        this.$router.push({
          path: "/topic",
          query: {
            id: id,
            title: title,
          },
        });
      } else {
        this.$router.push({
          path: "/practiceList",
          query: {
            id: id,
            title: title,
            status: status,
          },
        });
      }
    },
  },
};
</script>

<style scoped>
@import url("../css/ABC.css");
</style>
